<template>
    <!-- <div> -->
        <!-- <h3>商品页面</h3> -->
         <!-- 声明式动态子路由 -->
        <!-- <nuxt-link to="/goods/1?name=001&price=100">商品001</nuxt-link>
        <nuxt-link to="/goods/2?name=002&price=200">商品002</nuxt-link> -->
        <!-- 约定式路由 name后面是：目录+_id.vue文件的名称-->
        <!-- <nuxt-link :to='{name:"goods-id",params:{id:"3"},query:{"name": "003"}}'>商品003</nuxt-link>
        <nuxt-link :to='{name:"goods-id",params:{id:4},query:{"name": "004"}}'>商品004</nuxt-link> -->
        <!-- nuxt展示区 -->
        <!-- <nuxt/>     -->
    <!-- </div>     -->
    <div class="goods">
        <!-- 标签页 -->
        <el-tabs tab-position="right" style="height:700px" v-model="collectionName">
        <el-tab-pane label="课程" name="courses">
            <el-table :data="courses" style="width:100%" @row-click="getDetail">
            <el-table-column label="名称" prop="title" ></el-table-column>
            <el-table-column label="价格" prop="price" width="280"></el-table-column>
            <el-table-column label="发布时间" prop="gmtModified" width="280"></el-table-column>
            </el-table>
        </el-tab-pane>
        <el-tab-pane label="讲师" name="teachers">
            <el-table :data="teachers" style="width:100%" @row-click="getDetail">
            <el-table-column label="头衔" prop="career" ></el-table-column>
            <el-table-column label="名字" prop="name" width="280"></el-table-column>
            <el-table-column label="简介" prop="intro" width="280"></el-table-column>
            </el-table>
        </el-tab-pane>
        </el-tabs>
    </div> 
</template>
<script>
export default {
    name: 'goods',
    // head函数可以注入meta元信息,添加到页面源码上作为seo的优化之一
    head(){
        return {
            meta: [
                {name: "keyword", content: "关键字" + this.collectionName}
            ]
        }
    },
    // 测试：仅仅是学会使用而已，数据接口暂时使用课程列表和老师列表接口
    asyncData({$axios}){
        return Promise.all([
            $axios({url: `/eduservice/course/api/1/10`, method: 'post',data: {}}),
            $axios({ url: `/eduservice/teacher/1/10`})
        ]).then(([courseList,techerList])=> ({courses: courseList.data.data.items,teachers: techerList.data.data.items}))
    },
    // 绑定数据并注入到组件内部
   data:()=>({
       collectionName: 'courses'
   }),
   methods:{
    getDetail(row,col,ev){
        if(this.collectionName === "courses"){
            this.$router.push({name:'goods-id',params:{id:row.id},query:{collectinName:this.collectionName}})
        }else{
            this.$router.push({name:'teacher',params:{id:row.id},query:{collectinName:this.collectionName}})
        }
    }
  }
}
</script>